import React from "react";

function Section() {
  return (
    <div
      id="dashboard"
      className=" font-sans px-4 py-5"
      style={{ backgroundColor: "rgb(217, 224, 231)" }}
    >
      <div id="times" className="mb-5">
        <div id="section-title" className="flex items-center text-2xl">
          <div className=" font-bold">28 hrs 20 mins</div>
          &nbsp;over the&nbsp;
          <a href="#">
            <div
              style={{
                textDecoration: "none ",
                color: "#36558B",
                borderBottom: "1px #36558b dashed",
              }}
            >
              Last 7 Days
            </div>
          </a>
          .<a href="#"></a>
        </div>
        <div id="section-body" className="mt-5">
          <div className="grid grid-cols-2 gap-4">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                className="rounded-sm px-1 py-3 text-white"
                style={{ height: "15.3846rem", backgroundColor: "#2d353c" }}
              >
                <div className="px-2">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Nostrum, commodi laborum? Impedit consequatur eveniet natus
                  corporis necessitatibus autem numquam, ad repellendus,
                  praesentium alias dignissimos et quam dolor sed sapiente
                  aperiam.
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div id="projects" className="py-5">
        <div className="text-2xl mb-8">Projects</div>
        <div className="grid grid-cols-2 gap-12 pr-0 xl:grid-cols-3 xl:pr-3 mb-8">
          {Array.from({ length: 7 }).map((_, i) => (
            <div
              key={i}
              className="rounded shadow-xl shadow-gray-300 border border-gray-300 bg-white px-5 py-7"
            >
              <div className="ml-9 p-0">
                <div className="text-2xl mb-4">Title</div>
                <div className="text-gray-500 flex">
                  <div id="prj-hrs">8</div>
                  <div>&nbsp;hrs&nbsp;</div>
                  <div id="prj-mins">13</div>
                  <div>&nbsp;mins&nbsp;</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Section;
